<template>
  <!-- product-detail -->
  <div class="product-detail-container">
    <div class="product-detail-box">
			<el-row :gutter="5">
				<el-col :xs="24" :sm="16">

      <div class="left-box">
        <el-row :gutter="5">
          <el-col :xs="24" :sm="12" v-for="item in imagesList" :key="item.id">
            <el-image
              :src="
                'http://47.119.123.183/pub/media/catalog/product' + item.file
              "
            ></el-image>
          </el-col>
        </el-row>
      </div>
				</el-col>
				<el-col :xs="24" :sm="8">
      <div class="right-box">
        <div>
          <ul class="product-brands">
            <li>Gucci</li>
          </ul>
          <p class="product-title">
            {{ info.name }}
          </p>
          <p class="product-price">
            {{ "$" + info.price }}
          </p>
          <span @click="_anchorJump(0)">{{ "More info" }}</span>
          <div class="product-size">
            <span>{{ "SELECT SIZE" }}</span>
            <span>{{ selectText }}</span>
          </div>
          <div class="select-size">
            <span
              :class="item.checked ? 'active' : ''"
              v-for="(item, index) in selectSize"
              :key="index"
              @click="selectClick(item)"
              >{{ item.name }}</span
            >
          </div>
          <div class="add-to-card" @click="addCard">
            {{ "Add To Card" }}
          </div>
          <div class="favorite">
            <span>{{ "Favorite" }}</span>
            <i class="iconfont icon-heart"></i>
          </div>
          <ul class="explain">
            <li>
              {{ "Express shipping available in 3-7 working days. "
              }}<span @click="_anchorJump(2)">{{ "See conditions" }}</span>
            </li>
            <li>
              {{ "14 days return" }}
            </li>
          </ul>
        </div>
      </div>
			</el-col>
			</el-row>
    </div>
    <!-- info -->
    <div class="info-change">
      <div
        :class="infoCurrent === index ? 'active' : ''"
        v-for="(item, index) in infoList"
        :key="index"
        @click="infoClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <!-- base-info -->
    <div class="base-info-box">
      <div
        class="description-box"
        v-show="description"
        v-html="descriptionHtml"
      >
        <p>{{ info.description }}</p>
        <div>
          <div class="left-box">
            <p>{{ "Details" }}</p>
            <ul class="base-info-details-box">
              <li v-for="(item, index) in info.details">{{ item }}</li>
            </ul>
          </div>
          <div class="right-box">
            <p>{{ "Color" }}</p>
            <ul class="base-info-details-box">
              <li v-for="(item, index) in info.color">{{ item }}</li>
            </ul>
            <p>{{ "Product ID" }}</p>
            <ul class="base-info-details-box">
              <li v-for="(item, index) in info.product_id">{{ item }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="shipping-box" v-show="shipping">
        <p>{{ info.shipping1 }}</p>
        <ul>
          <li v-for="(item, index) in info.shippingList">{{ item }}</li>
        </ul>
        <p>{{ info.shipping2 }}</p>
        <p>{{ info.shipping3 }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { anchorJump } from "@/utils/scroll-to";
import { add_card, cartsMineItems } from "@/api/rest_api";
import { productRender } from "@/api/user";
let _ = require("lodash");
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["cardCode", "token", 'quote_id'])
  },
  data() {
    return {
      infoList: ["Description", "Technology", "Shipping and returns"],
      infoCurrent: 0,
      info: {
        description:
          "The backpack continues to be an important silhouette in the world of Gucci, offered in a variety of sizes and interpretations. Part of the ever-expanding world of Ophidia, it's crafted in GG Supreme canvas with textured leather trim. The inlaid green and red Web detail and Double G hardware are steeped in the House's rich history, referencing symbols incorporated in Gucci collections since the '50s.",
        details: [
          "Beige/ebony GG Supreme canvas, a material with low environmental impact, with brown leather trim",
          "Green and red Web",
          "Antique gold-toned hardware",
          "Double G",
          "Black mesh back",
          "Front zipper pocket",
          "Interior zipper and smartphone pockets",
          "Adjustable shoulder straps",
          "Zipper closure",
          "Medium size: W32cm x H40.5cm x D14.5cm"
        ],
        color: ["BEIGE/EBONY"],
        product_id: ["547967-9U8BT-8994"],
        shipping1:
          "Express shipping with DHL, you will receive your order between 3 and 7 working days.",
        shippingList: [
          "Free for orders of $250 or more.",
          "$15 for orders below €250."
        ],
        shipping2: "For more information, please see the shipping page.",
        shipping3:
          "The usual 14 days period to make returns since receiving the product has been extended. For more information, please see the returns page."
      },
      description: true,
      shipping: false,
      selectSize: [
        {
          name: "41",
          checked: false
        },
        {
          name: "41 1/3",
          checked: false
        },
        {
          name: "42",
          checked: false
        },
        {
          name: "42 2/3",
          checked: false
        },
        {
          name: "43",
          checked: false
        }
      ],
      selectText: "",
      imagesList: [],
      descriptionHtml: ""
    };
  },

  mounted() {
    this.loadList();
  },

  methods: {
    infoClick(idx) {
      if (this.infoCurrent === idx) return;
      this.infoCurrent = idx;
      switch (idx) {
        case 0:
          this.description = true;
          this.shipping = false;
          break;
        case 1:
          this.description = false;
          this.shipping = false;
          break;
        case 2:
          this.description = false;
          this.shipping = true;
          break;
      }
    },
    // 锚点
    async _anchorJump(idx) {
      await this.infoClick(idx);
      anchorJump(0, "info-change");
    },
    // select Size
    selectClick(row) {
      let checked = row.checked;

      for (let i in this.selectSize) {
        this.selectSize[i].checked = false;
      }

      if (checked) return (this.selectText = "");

      row.checked = !checked;
      this.selectText = row.name;
    },
    async addCard() {
      if (!this.selectText) return this.$message.error("Please select size");
      let params = JSON.stringify({
        cartItem: { sku: this.info.sku, qty: 1, quote_id: this.quote_id? this.quote_id: this.cardCode }
      });
      let { error, res } = this.quote_id?await cartsMineItems(params, this.token): await add_card(this.cardCode, params);
      if (error) return;
      let info = {
        id: res.item_id,
        name: res.name,
        price: res.price,
        product_type: res.product_type,
        qty: res.qty,
        quote_id: res.quote_id,
        sku: res.sku,
        src: 'http://47.119.123.183/pub/media/catalog/product' + this.imagesList[0].file,
        isActive: false
      };
      this.$store.dispatch("product/addProduct", info);
      this.$message.success("Add to card success");
    },
    async loadList() {
      let data = JSON.parse(sessionStorage.getItem("productInfo"));
      this.imagesList = data.media_gallery_entries;
      // get descriptionHtml
      for (let i in data.custom_attributes) {
        if (data.custom_attributes[i].attribute_code === "description") {
          this.descriptionHtml = data.custom_attributes[i].value;
        }
      }
      // this.descriptionHtml = data.media_gallery_entries;
      this.info = data;
      console.log(data);
      let params = {
        "searchCriteria[filterGroups][0][filters][0][field]": "brands",
        "searchCriteria[filterGroups][0][filters][0][value]": data.name,
        "searchCriteria[filterGroups][0][filters][0][conditionType]": "or", //模糊查询
        "searchCriteria[sortOrders][0][field]": data.created_at, //按照创建时间排序
        "searchCriteria[sortOrders][0][direction]": "desc",
        "searchCriteria[pageSize]": 100,
        "searchCriteria[currentPage]": 1,
        storeId: 1,
        currencyCode: "rmb"
      };
      let { error, res } = await productRender(params);
      if (error) return;
      console.log(res);
    }
  }
};
</script>
<style lang="scss" scoped>
.product-detail-container {
  .product-detail-box {
    .right-box {
      
      & > div {
        max-width: 330px;
        margin: 0 auto;
        padding: 50px 0;
        ul,
        li {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        ul.product-brands {
          font-weight: 500;
        }
        p.product-title {
          font-size: 18px;
          font-weight: 500;
          letter-spacing: 0;
          margin: 10px 0;
          line-height: 1.5;
        }
        p.product-price {
          margin: 0;
        }
        & > span {
          text-decoration: underline;
          font-size: 12px;
          cursor: pointer;
        }
        div.product-size {
          margin-top: 5px;
          span {
            font-weight: 500;
            color: #969696;
            padding-right: 5px;
            margin-right: 10px;
            font-size: 12px;
            text-transform: uppercase;

            &:last-child {
              font-size: 16px;
            }
          }
        }
        div.select-size {
          display: flex;
          flex-wrap: wrap;
          margin: 10px 0;
          span {
            display: inline-block;
            width: calc(100% / 4);
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            border: 1px solid transparent;

            &.active {
              border-color: #1a1a1a;
            }
          }
        }
        .add-to-card {
          height: 52px;
          line-height: 52px;
          background: #000;
          color: #fff;
          text-align: center;
          font-weight: 500;
          cursor: pointer;
          margin-bottom: 10px;
        }
        .favorite {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #e1e1e1;
          transition: all 0.2s linear;
          cursor: pointer;
          margin-bottom: 32px;

          &:hover {
            border-color: #1a1a1a;
          }
          span {
            font-size: 14px;
            margin-right: 5px;
          }
        }
        ul.explain {
          li {
            position: relative;
            padding-left: 30px;
            font-size: 12px;
            color: #3e3e3e;
            margin-bottom: 8px;
            line-height: 1.6;
            span {
              cursor: pointer;
              font-weight: 500;
              color: #000;
              text-decoration: underline;
            }
            &::after {
              position: absolute;
              content: "";
              width: 10px;
              height: 2px;
              left: 5px;
              top: 10px;
              -webkit-transform: skew(0deg, -50deg);
              transform: skew(0deg, -50deg);
              background: #1a1a1a;
            }
            &::before {
              position: absolute;
              content: "";
              width: 5px;
              height: 2px;
              left: 0;
              top: 12px;
              -webkit-transform: skew(0deg, 50deg);
              transform: skew(0deg, 50deg);
              background: #1a1a1a;
            }
          }
        }
      }
    }
  }
  .info-change {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    & > div {
			@media (max-width: 768px) {
				font-size: 12px;
				margin: 0 5px;
			}
			@media (min-width: 768px) {
				font-size: 12px;
			margin: 0 15px;
			}
      color: #969696;
      padding-bottom: 5px;
      border-bottom: 2px solid transparent;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s linear;
      &:hover,
      &.active {
        color: #000;
        border-bottom-color: #000;
      }
    }
  }
  .base-info-box {
    max-width: 640px;
    margin: 0 auto 50px;
    font-size: 15px;
    color: #3e3e3e;
    .description-box {
			padding: 0 10px;
      & > p {
        margin: 0;
        line-height: 25px;
        margin-bottom: 10px;
      }
      & > div {
        display: flex;
        ul,
        li {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        li {
          display: flex;
          align-items: center;
          line-height: 1.35;
          padding: 5px 0;
        }
        & > div {
          & > p {
            margin: 0;
            font-weight: 600;
          }
        }
        & > .left-box {
          width: 288px;
          margin-right: 32px;
        }
        & > .right-box {
          & > ul {
            margin-bottom: 32px;
          }
        }
      }
    }
    .shipping-box {
      & > p {
        margin: 0;
        margin-bottom: 10px;
        line-height: 25px;
      }
      & > ul {
        padding-left: 20px;
        margin-bottom: 32px;
        li {
          list-style: square;
        }
      }
    }
  }
}
</style>
